<!-- eslint-disable vue/no-template-shadow -->
<template>
  <div class="dashboard-container">
    <div style="padding:20px">
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="list"
        height="calc(100vh - 160px)"
        style="width: 100%;"
        size="mini"
        border
        tooltip-effect="dark"
        :header-cell-style="{ background: '#eaf1fd', color: '#333' }"
      >
        <el-table-column
          label="母系统单号"
          prop="mother_tid"
          min-width="200px"
          fixed
        />
        <el-table-column
          label="系统单号"
          width="200px"
        >
          <template slot-scope="{ row }">
            <div>
              <span>{{ row.tid }}</span>
            </div>
          </template>

        </el-table-column>
        <el-table-column
          label="是否为母单"
          width="120px"
        >
          <template slot-scope="{ row }">
            <div>
              <span v-if="row.is_mother">是</span>
              <span v-else>否</span>

            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="主运单号"
          width="150px"
        >
          <template slot-scope="{ row }">
            <div>
              <span>{{ row.order.first_waybill_no }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="从运单号"
          width="150px"
        >
          <template slot-scope="{ row }">
            <div>
              <span>{{ row.waybill_no }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          width="100px"
        >
          <template slot-scope="{ row }">
            <div>
              <el-tag :type="row.order.status == 102?'info':row.order.status == 103?'':row.order.status == 104?'success':'danger'">{{ row.order.status == 102?'待取号':row.order.status == 103?'已取号':row.order.status == 104?'已发货':'已废弃' }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="订单标识"
          width="160px"
        >
          <template slot-scope="{ row }">
            <div>
              <el-tag style="margin-right:10px" :type="row.order.label_data.is_error?'success':'info'">异</el-tag>
              <el-tag style="margin-right:10px" :type="row.order.label_data.is_collect?'success':'info'">揽</el-tag>
              <el-tag style="margin-right:10px" :type="row.order.label_data.is_complete?'success':'info'">完</el-tag>
              <el-tooltip v-if="row.order.error" class="item" effect="dark" :content="row.order.error" placement="top">
                <el-tag style="margin-right:10px;cursor:pointer" :type="row.order.label_data.is_pay?'success':'info'">支</el-tag>
              </el-tooltip>
              <el-tag v-else style="margin-right:10px;" :type="row.order.label_data.is_pay?'success':'info'">支</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="用户昵称"
          prop="order.user.username"
          min-width="180px"
        />
        <el-table-column
          label="客户昵称"
          prop="order.client.username"
          width="150px"
        />
        <el-table-column
          label="来源单号"
          prop="order.order_no"
          min-width="150px"
        />
        <el-table-column
          label="提单号"
          prop="order.trade_code"
          min-width="150px"
        />
        <el-table-column
          label="真实提单号"
          min-width="150px"
        >
          <template slot-scope="{ row }">
            <div>
              <span v-if="row.order && row.order.customs_affairs">{{ row.order.customs_affairs.code }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="收件人"
          prop="order.receiver.name"
          width="140px"
        />
        <el-table-column
          label="走件渠道"
          prop="order.channel.name"
          width="240px"
        />
        <el-table-column
          label="货物类型"
          prop="order.goods_type.name"
          width="140px"
        />
        <el-table-column
          label="价格模版"
          prop="order.freight_temp.name"
          width="240px"
        />
        <el-table-column
          label="大小件"
          prop="order.currency"
          width="140px"
        >
          <template slot-scope="{ row }">
            <div>
              <span v-if="row.order.size == 1">小件</span>
              <span v-if="row.order.size == 2">大件</span>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="订单类型"
          prop="currency"
          width="140px"
        >
          <template slot-scope="{ row }">
            <div>
              <span v-if="row.order.order_type == 1">仓储</span>
              <span v-if="row.order.order_type == 2">非仓储</span>
            </div>
          </template>
        </el-table-column> -->
        <!-- <el-table-column
          label="送货方式"
          prop="currency"
          width="140px"
        >
          <template slot-scope="{ row }">
            <div>
              <span v-if="row.order.delivery_method == 1">上门取件</span>
              <span v-if="row.order.delivery_method == 2">自送货物</span>
            </div>
          </template>
        </el-table-column> -->
        <el-table-column
          label="快递产品类型"
          prop="currency"
          width="140px"
        >
          <template slot-scope="{ row }">
            <div>
              <span v-if="row.order.express_type == 1">标快</span>
              <span v-if="row.order.express_type == 2">特快</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="批次号"
          prop="order.batch_no"
          width="140px"
        />

        <el-table-column
          label="下单时间"
          prop="order.created"
          width="140px"
        />
        <el-table-column
          label="操作"
          align="right"
          min-width="100"
          class-name="small-padding fixed-width"
          fixed="right"
        >
          <template slot-scope="{ row }">
            <el-button
              size="mini"
              type=""
              @click="cheack(row)"
            >
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="getList"
      />
    </div>
    <Detial :detial="detial" :status="status" :visible="visible" @update="closeDraw" @reload="reloadList" />
  </div>
</template>

<script>
import { motherListDetail } from '@/api/order/index'

import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import Detial from './components/orderDetial.vue'
export default {
  name: 'Dashboard',
  components: {
    Pagination,
    Detial
  },
  data() {
    return {
      editAllDraw: false,
      loadingExcel: false,
      dialogVisible: false,
      dialogGetNumBatch: false, // 批量取末端单号弹窗
      data_arr: [],
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        tid: ''
      },
      visible: false,
      status: 1,
      id: '',
      detial: {},
      PortList: [],
      row: {},
      CourierList: [],
      company_code: '',
      selectList: [],
      getNumBatchSucNum: 0, // 批量取末端单号-成功的数量
      getNumBatchErrNum: 0, // 批量取末端单号-失败的数量
      getNumBatchErrList: [], // 批量取末端单号-失败原因
      submitGetNumType: 1 // 默认为单个取末端单号， 2 为批量
    }
  },
  computed: {
  },
  created() {
    this.listQuery.tid = this.$route.query.tid
    this.getList()
  },
  methods: {
    handleSelectionChange(val) {
      this.selectList = val
    },
    handleClose() {
      this.dialogVisible = false
    },
    closeDraw() {
      this.visible = false
      this.editAllDraw = false
    },
    cheack(row) {
      this.detial = { ...row.order }
      this.status = 1
      this.visible = true
    },
    reloadList() {
      this.listQuery.page = 1
      this.visible = false
      this.editAllDraw = false
      this.getList()
    },
    getList() {
      this.listLoading = true
      motherListDetail(this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.count
        this.listLoading = false
      })
    }
  }
}
</script>
<style scoped>
.filter-container{
  padding:20px 20px 10px;
}
.upload-demo{
  margin: 20px 0 10px;
}
</style>
